<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/list.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript" src="axios.js"></script>
    <script type="text/javascript" src="zepto.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <div class="panel panel-info">
            <div class="panel-heading panel-title">
                <div class="h2">
                    Login
                </div>
            </div>
            <div class="panel-body">
                <div class="hide alert alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong class="ajax-type"></strong> <span class="ajax-result"></span>
                </div>
                <form class="form-horizontal" action="../2.php" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 col-lg-2 control-label" for="name">Name</label>
                        <div class="col-sm-10 col-lg-10">
                            <input class="form-control" type="text" name="name" id="name" v-model="name"
                                   placeholder="input name...">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-lg-2 control-label" for="age">Age</label>
                        <div class="col-sm-10 col-lg-10">
                            <input class="form-control" type="number" name="age" id="age" v-model="age"
                                   placeholder="input age..">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-2 col-sm-2 col-lg-2">
                            <button class="btn btn-default" type="submit">Submit</button>
                        </div>
                        <div class="col-xs-2 col-sm-2 col-lg-2">
                            <a class="btn btn-info" v-on:click="axios_login">Axios</a>
                        </div>
                        <div class="col-xs-2 col-sm-2 col-lg-2">
                            <a class="btn btn-success" v-on:click="zepto_login">Zepto</a>
                        </div>
                        <div class="col-xs-2 col-sm-2 col-lg-2">
                            <a class="btn btn-warning" v-on:click="jquery_login">Jquery</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            name: '',
            age: undefined,
            person: [],
            url: './../2.php'
        },
        methods: {
            axios_login: function () {
                var params = new URLSearchParams();
                params.append('name', this.name);
                params.append('age', this.age);
                axios.post(this.url, params).then(function (response) {
                    if (response.data.status) {
                        $('div.alert[role=alert]').removeClass('hide').addClass('alert-success');
                        $('.ajax-result').text(response.data.result);
                        $('.ajax-type').text(response.data.type);
                    } else {
                        $('div.alert[role=alert]').removeClass('hide').addClass('alert-warning');
                        $('.ajax-result').text(response.data.result);
                        $('.ajax-type').text(response.data.type);
                    }
                }).catch(function (error) {
                    console.log(error)
                });
                return false;
            },
            zepto_login: function () {
                $.post(this.url, {name: this.name, age: this.age}, function (response) {
                    if (response.status) {
                        $('div.alert[role=alert]').removeClass('hide').addClass('alert-success');
                        $('.ajax-result').text(response.result);
                        $('.ajax-type').text(response.type);
                    } else {
                        $('div.alert[role=alert]').removeClass('hide').addClass('alert-warning');
                        $('.ajax-result').text(response.result);
                        $('.ajax-type').text(response.type);
                    }
                }, 'json');
                return false;
            },
            jquery_login: function () {

                return false;
            }
        }
    });
</script>